<template>
  <view class="page-body">
    <view class="content">
      <div class="flex flex-col items-center justify-center m-b-29">
        <!-- <image :src="logoRow" style="width: 222rpx" mode="widthFix" /> -->
        <image :src="title_text" class="title_text_img" mode="widthFix" />
      </div>
      <div class="m-b-20 font-size-18 font-weight-700">
        当前门店：{{ useCommonStore().merchantName }}
      </div>
      <up-form labelWidth="0" :model="formData" :rules="rules" ref="formRef">
        <up-form-item prop="username" class="m-b-22">
          <div class="flex-1 w-0">
            <up-input
              class="input_h"
              v-model="formData.username"
              placeholder="请输入用户名称"
            >
              <template #prefix>
                <div class="iconfont icon-yonghu"></div>
              </template>
            </up-input>
          </div>
        </up-form-item>
        <up-form-item prop="password" class="m-b-22">
          <div class="flex-1 w-0">
            <up-input
              class="input_h"
              v-model="formData.password"
              placeholder="请输入用户密码"
              :type="yulan ? 'text' : 'password'"
            >
              <template #prefix>
                <div class="iconfont icon-mima"></div>
              </template>
              <template #suffix>
                <div
                  @click="yulan = !yulan"
                  v-if="yulan"
                  class="iconfont icon-yulan-kaiqi"
                ></div>
                <div
                  @click="yulan = !yulan"
                  v-else
                  class="iconfont icon-yulan-guanbi"
                ></div>
              </template>
            </up-input>
          </div>
        </up-form-item>

        <up-button
          class="m-t-27 input_h submit_bt"
          type="primary"
          @click="submit"
        >
          登录
        </up-button>
      </up-form>
    </view>
  </view>
</template>
<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import title_text from "@/static/images/title_text.png";
import utils from "@/utils/index.js";
import allApi from "@/api/index.js";
import { trim } from "lodash-es";
import { useCommonStore } from "../../store/common";
import { useWebSocketStore } from "../../store/websocket";

const formRef = ref();
const formData = ref({
  password: "hhy1306B",
  username: "18888888888",
});
const rules = reactive({
  username: {
    type: "string",
    required: true,
    message: "请输入用户名",
    trigger: ["change"],
  },
  password: {
    type: "string",
    required: true,
    message: "请输入用户密码",
    trigger: ["change"],
  },
  // posNo: [
  //   {
  //     trigger: ["blur"],
  //     validator: async (rule, value, callback) => {
  //       if (!formData.value.merchantId)
  //         return callback(new Error("请先选择绑定门店"));
  //       if (!trim(value).length) return callback(new Error("POS机号不能为空"));
  //       try {
  //         const res = await allApi.ecm.posDevice
  //           .verifyPosNoExits({
  //             posNo: value,
  //             merchantId: formData.value.merchantId,
  //           })
  //           .then((res) => {
  //             if (res.data) {
  //               callback();
  //             } else {
  //               callback(new Error("POS机号已被注册，请更换POS机号"));
  //             }
  //           });
  //         if (!res.data) callback(new Error("POS机号已被注册，请更换POS机号"));
  //         else callback();
  //       } catch (error) {
  //         callback(new Error("服务器异常"));
  //       }
  //     },
  //   },
  // ],
  // snNo: {
  //   type: "string",
  //   trigger: ["blur"],
  //   validator: (rule, value, callback) => {
  //     if (!trim(value).length) {
  //       callback(new Error("设备SN号不能为空"));
  //     } else {
  //       callback();
  //     }
  //   },
  // },
});
const yulan = ref(false);
onLoad(() => {});

async function submit() {
  utils.throttle(async () => {
    await formRef.value.validate();
    // 登录获取userId
    const res = await allApi.system.authLogin(formData.value);
    useCommonStore().setUserId(res.data.userId);

    // 获取用户信息
    const res1 = await allApi.system.getUserInfo(res.data.userId);
    useCommonStore().setUserInfo(res1.data);
    console.log(res1.data);

    // 连接并发送消息
    await useWebSocketStore().onConnectSend();

    utils.toUrl("/pages/home/home", "reLaunch");
  });
}
</script>
<style lang="scss" scoped>
.page-body {
  width: 1280px;
  height: 672px;
  background: url("../../static/images/bind_bg.png") no-repeat center;
  background-size: 100% 100%;
  touch-action: none; /* 防止滑动或双指缩放 */

  .content {
    padding: 33px 33px 47px;
    position: fixed;
    left: 680px;
    top: 133.33px;
    width: 453.33px;
    min-height: 433.33px;
    opacity: 1;
    border-radius: 13.33px;
    background: #ffffff;
    box-shadow: 0px 6.67px 20px 6.67px #000000;

    ::v-deep .u-form-item__body {
      padding: 0;
    }

    ::v-deep .u-form-item__body__right__message {
      // margin-left: 0!important;
      font-size: 16px;
      line-height: 1.2;
    }

    .title_text_img {
      width: 259px;
    }
    .input_h {
      height: 53.33px;
    }
    .submit_bt {
      width: 387px;
      font-size: 18px;
      font-weight: 500;
      background: #1b7afe;
      border-radius: 5px;
    }
  }
  .iconfont {
    color: $uni-text-color-disable;
    margin-right: 4px;
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 20px;
  }
}

.pos-no-success {
  color: $uni-color-success;
  font-size: 16px;
}
</style>
